<template>
  <div class="operate-share" id="operate-share" @click="handleClick">
    <div class="content" v-loading="loading">
      <h1 class="title">当前相册为：{{ imageStore.categorySharing.categoryName }}</h1>
      <el-icon @click="close"><Close /></el-icon>
      <el-scrollbar >
        <div class="links">
          <div 
            class="link  link-in" 
            :class="{'link-out': share.outAnimate}"
            v-for="share in imageStore.imageShares" 
            :key="share.id"
          >
            <el-tooltip
              class="box-item"
              effect="light"
              :content="`创建于${formatTime(share.createTime)} 点击访问`"
              placement="left-start"
            >
              <a 
                class="url" 
                :href="baseUrl + `?id=${share.id}`"
                target="_blank"
              >
                {{ share.id }}
              </a>
            </el-tooltip>
            <div class="link-operate">
              <el-button type="primary" @click="copy(baseUrl + `?id=${share.id}`)">复制链接</el-button>
              <el-button type="danger" @click="rmShare(share)">删除</el-button>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <el-button class="new-share" type="success" @click="createShare">生成新的分享链接</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { getImageShareList, removeImageShare, saveImageShare } from '../../request/imgShare';
import { useImageStore } from '../../store/image';
import { formatTime } from '../../util/chore';
import {ImageShare} from '../../type/entity'
import { copyText } from '../../util/chore';
const imageStore = useImageStore()
const loading = ref(true)
const baseUrl = 'http://daluan.gitee.io/luan_pages/image_share'
getImageShareList(imageStore.categorySharing.id).then(
  val => { 
    imageStore.imageShares = val.data
    loading.value = false 
  }
).catch(
  err => { loading.value = false }
)
function close(){
  imageStore.shareOperating = false
}
function createShare(){
  loading.value = true
  saveImageShare(imageStore.categorySharing.id).then(
    val => {
      if(val.data.id){
        imageStore.imageShares.unshift(val.data)
      }
      loading.value = false
    }
  ).catch(
    err => { loading.value = false }
  )
}
function rmShare(share:ImageShare){
  loading.value = true
  removeImageShare(share.id).then(
    val => {
      if(val.data.success){
        ElMessage({type:'success', message:'删除成功'})
        share.outAnimate = true
        setTimeout(() => {
          imageStore.imageShares = imageStore.imageShares.filter(s => s.id != share.id)
        }, 1000);
      }
      else {
        ElMessage({type:'error', message:'删除失败'})
      }
      loading.value = false
    }
  ).catch(
    err => { loading.value = false }
  )
}
function copy(str:string){
  copyText(str).then(
    val => { ElMessage({type: 'success', message: '复制成功'}) },
    err => { ElMessage({type: 'error', message: '出错了'}) }
  )
}
function handleClick(e:any){
  if(e.target.id === 'operate-share'){
    close()
  }
}
</script>

<style scoped>

</style>